# 快速开始

import { PackageManagerTabs } from '@rspress/core/theme'

## 1. 初始化项目

### 方式一：通过脚手架创建

你可以通过 Zess 脚手架命令来创建项目:

<PackageManagerTabs
  command={{
    npm: 'npx -p @zessjs/cli init my-app',
    yarn: 'yarn dlx -p @zessjs/cli init my-app',
    pnpm: 'pnpx -p @zessjs/cli init my-app',
    bun: 'bunx -p @zessjs/cli init my-app',
  }}
/>

其中 `my-app` 为要创建的项目目录名。运行命令后，只需按照提示输入项目名称并选择模板，即可快速创建 Zess 项目。

<img
  src="https://pic1.imgdb.cn/item/68dea750c5157e1a885103f9.gif"
  alt="Zess CLI Usage"
/>

新创建的 Zess 项目预置了完整的开发工具链，包括路由系统、Vitest 测试框架，以及 Tailwind CSS、ESLint 和 Prettier，实现开箱即用。其详细文件结构如下所示：

```text
my-app/
├── .gitignore
├── README.md
├── package.json
├── eslint.config.ts
├── index.html
├── tsconfig.json
├── vite.config.ts
├── public/
│   └── zess.svg
├── src/
│   ├── App.tsx
│   ├── assets/
│   │   ├── style.css
│   │   └── vite.svg
│   └── pages/
│       ├── ConditionalPage.tsx
│       ├── CounterPage.tsx
│       ├── HomePage.tsx
│       └── ListPage.tsx
└── tests/
    └── HelloWorld.test.tsx
```

### 方式二：手动创建

首先，您可以选择一个现有项目目录，或通过以下命令初始化新项目：

```bash
mkdir my-app && cd my-app && npm init -y
```

接着，使用 npm、pnpm、yarn 或 bun 安装 Zess 核心库：

<PackageManagerTabs command="install @zessjs/core" />

再安装 Zess 的 JSX 编译器插件（如未安装 Vite，请一并安装）：

<PackageManagerTabs command="install @zessjs/vite-plugin -D" />

在 `package.json` 中添加以下脚本：

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
```

在 Vite 配置中引入 `@zessjs/vite-plugin`：

```ts title="vite.config.ts"
import { defineConfig } from 'vite'
import zess from '@zessjs/vite-plugin'

export default defineConfig({
  plugins: [zess()],
})
```

同时新建 `tsconfig.json`，内容如下：

```json
{
  "compilerOptions": {
    "target": "ESNext",
    "jsx": "preserve",
    "jsxImportSource": "@zessjs/core",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "moduleDetection": "force",
    "module": "preserve",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "types": ["vite/client"],
    "strict": true,
    "noUnusedLocals": true,
    "declaration": true,
    "noEmit": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}
```

## 2. 启动开发服务器

执行以下命令启动开发服务器：

```bash
npm run dev
```

该命令将启动 Vite 开发服务器，默认运行在 `http://localhost:5173`。您可在浏览器中访问该地址查看项目效果。

:::tip 提示

运行 `dev` 命令时，可通过 `--port` 或 `--host` 参数指定端口或主机，例如 `npm run dev -- --port 8080 --host 0.0.0.0`。

:::

## 3. 构建生产版本

执行以下命令构建生产环境产物：

```bash
npm run build
```

默认情况下，构建输出将位于 `dist` 目录。

## 4. 本地预览构建结果

运行以下命令启动本地预览服务：

```bash
npm run preview
```

该命令将启动一个本地服务器，用于预览构建后的项目效果。
